/*-----------------------------------------------------------------------

http://victoriabeckham.landrover.com/ 
Range Rover Evoque Special Edition With Victoria Beckham by
 _     _                             _(_)          
| |__ | | __ _ ___| |_ _ __ __ _  __| |_ _   _ ___ 
| '_ \| |/ _` / __| __| '__/ _` |/ _` | | | | / __|   amsterdam
| |_) | | (_| \__ \ |_| | | (_| | (_| | | |_| \__ \   london
|_.__/|_|\__,_|___/\__|_|  \__,_|\__,_|_|\__,_|___/   2012

Tech Lead & Dev : Richard Jewson
PM				: Adeola Adedeji
Creative		: Gareth Leeding
Dev				: Paul Cheteles
Dev				: George Cheteles
QA				: Monica Pop-Timar
Creative		: Alex Champion

Respect AJ2012 team!

-----------------------------------------------------------------------*/

var LandroverSite = (function() {
	var settings = {},
		defaults = {
			startAt: 0,					// start experience at
			sectionCheckInterval: 1000,	// check section interval
			clampWidth: 1600,
			tracking: false
		},
		scrollAnimate,
		currentSection = -1,
		checkSectionLock = 0,
		updateCount = 0,
		loadProgress;
	
	//Animation viewport metrics
	var wHeight, wWidth, wCenter, outroComp, ratio;
	//Scrollbar related stuff
	var $scrollBar, $scrollThumb, isScrolling, scrollBarHeight, scrollThumbHeight, thumbDelta, scrollThumbPosition, scrollPercent;
	//Tooltip stuff
	var tooltipJustOpened = true;
	//Overlay
	var $overlay;
	var player;
	var lastActivity = (new Date()).getTime();
	var pulseReminders = 3;
	var pulseScrollTeaserRunning = false;

	//---------------------------------------------
	// Animation Position Helpers
	//---------------------------------------------

	var animationFunctions = {
		
		absPosition: function(opts) {
			var defaults = {startLeft: 0,
							startTop: 0,
							endLeft: 0,
							endTop: 0},
			settings = $.extend(defaults, opts);
			this.startProperties['left'] = settings.startLeft;
			this.startProperties['top'] = settings.startTop;
			this.endProperties['left'] = settings.endLeft;
			this.endProperties['top'] = settings.endTop;
			this.startProperties['display'] = 'block';
			this.endProperties['display'] = 'none';
		},
			
		bottomLeftOutside: function( anim, opts ) {
			var defaults = {offset:0}, settings = $.extend(defaults, opts);
			var portrait = false, //wHeight > wWidth ? true : false,
				elemHalfWidth = anim._elem.width()/2,
				elemHalfHeight = anim._elem.height()/2,
				adj = portrait ? wWidth/2 + elemHalfWidth : adj = wHeight/2 + elemHalfHeight,
				tan = Math.sqrt( Math.pow( adj, 2) + Math.pow( adj, 2) );
			
			this.properties['top'] = wCenter.top + adj - elemHalfHeight + (portrait ? settings.offset : 0);
			this.properties['left'] = wCenter.left - adj - elemHalfWidth + (portrait ? 0 : settings.offset);
		},

		topRightOutside: function( anim, opts ) {
			var defaults = {offset:0}, settings = $.extend(defaults, opts);
			var portrait = false, //wHeight > wWidth ? true : false,
				elemHalfWidth = anim._elem.width()/2,
				elemHalfHeight = anim._elem.height()/2,
				adj = portrait ? wWidth/2 + elemHalfWidth : adj = wHeight/2 + elemHalfHeight,
				tan = Math.sqrt( Math.pow( adj, 2) + Math.pow( adj, 2) );

			this.properties['top'] = wCenter.top - adj - elemHalfHeight + (portrait ? settings.offset : 0);
			this.properties['left'] = wCenter.left + adj - elemHalfWidth + (portrait ? 0 : settings.offset);
		},

		leftOutside: function( anim, opts ) {
			var defaults = {offset:0}, settings = $.extend(defaults, opts);
			this.properties['left'] = -anim._elem.width() + settings.offset;
		},

		leftOutsideClampWidth: function( anim, opts ) {
			this.properties['left'] = -anim._elem.width() - (settings.clampWidth - wWidth)/2;
		},

		rightOutside: function( anim, opts ) {
			var defaults = {offset:0}, settings = $.extend(defaults, opts);
			this.properties['left'] = wWidth + settings.offset;
		},

		rightOutsideClampWidth: function( anim, opts ) {
			this.properties['left'] = wWidth + (settings.clampWidth - wWidth)/2;
		},

		centerV: function( anim, opts ) {
			var defaults = {offset:0}, settings = $.extend(defaults, opts);
			var elemHalfHeight = anim._elem.height()/2;
			this.properties['top'] = wCenter.top - elemHalfHeight + settings.offset;
		},

		centerH: function( anim, opts ) {
			var defaults = {offset:0}, settings = $.extend(defaults, opts);			
			var elemHalfWidth = anim._elem.width()/2;
			this.properties['left'] = wCenter.left - elemHalfWidth + settings.offset;	
		},

		bottomOutside: function( anim, opts ) {
			var defaults = {offset:0}, settings = $.extend(defaults, opts);
			this.properties['top'] = wHeight + settings.offset;
		},

		topOutside: function( anim, opts) {
			var defaults = {offset:0}, settings = $.extend(defaults, opts);
			this.properties['top'] = -anim._elem.height() + settings.offset;
		},

		rightInside: function( anim, opts ) {
			var defaults = {offset:0}, settings = $.extend(defaults, opts);
			this.properties['left'] =  -anim._elem.width() + (wWidth) + settings.offset;
		},

		backgroundA: function( anim, opts ) {
			var defaults = {offset:0,bgsize:0}, settings = $.extend(defaults, opts);
			this.properties['background-position'] = anim._elem.width() + settings.offset - (1600-wWidth)/2;
			//trace("A="+(anim._elem.width() - (1600-wWidth)/2))
		},

		backgroundB: function( anim, opts ) {
			var defaults = {offset:0,bgsize:0}, settings = $.extend(defaults, opts);
			this.properties['background-position'] = -opts.bgsize + settings.offset + (1600-wWidth)/2;
			//trace("B="+(-opts.bgsize + (1600-wWidth)/2))
		}

	}


	//---------------------------------------------
	// Animation Data
	//---------------------------------------------
	
	var t = 0;

	var totalHeightPx = 8000;
	var outroHeightPx = 4000;

	var detailStart = 2000;
	var outroStart = 5180;
	var outroLength = 0;
	var eventsDelta = 0;
	var maxScroll = 0; 

	var sectionIndex = [
		{id:"#intro1",name:"intro1",tag:"#intro1",position:0,correct:false},
		{id:"#intro2",name:"intro2",tag:"#intro2",position:500,correct:false},
		{id:"#intro3",name:"intro3",tag:"#intro3",position:1000,correct:false},
		{id:"#intro4",name:"intro4",tag:"#intro4",position:1500,correct:false},
		{id:"#horizontalSection",name:"horizontal",tag:"#horizontal",position:detailStart,correct:false},
		{id:"#outro1",name:"outro1",tag:"#outro1",position:outroStart+670,correct:true},
		{id:"#outro2",name:"outro2",tag:"#outro2",position:outroStart+1240,correct:true},
		{id:"#outro3",name:"outro3",tag:"#outro3",position:outroStart+1840,correct:true}
	];

	if (window.eventSectionLive) {
		sectionIndex.push({id:"#outro4",name:"outro4",tag:"#outro4",position:outroStart+2499,correct:true});
		sectionIndex.push({id:"#outro5",name:"outro5",tag:"#outro5",position:outroStart+3100,correct:true});
		totalHeightPx+=1000;
		outroHeightPx+=1000;
		outroLength = 3100;
		eventsDelta = 600;
	} else {
		sectionIndex.push({id:"#outro5",name:"outro5",tag:"#outro5",position:outroStart+2499,correct:true});
		outroLength = 2500;
		$("#outro4").css("display","none");
		eventsDelta = 0;
	}

	maxScroll = outroStart+outroLength;

	var i2delta = 50;

	var animation = [
		{
			selector: '#verticalScrollArea',
			startAt: 0,
			endAt: detailStart,
			onEndAnimate:function( anim ) {
			},
			keyframes: [
				{ 
					position: 0,
					properties: {
						top: 0
					}
					
				},
				{
					position: 1,
					ease: TWEEN.Easing.Linear.EaseNone,
					onInit: function( anim ) {
					
					},
					properties: {
						top: -4030
					}
				}
			]
		}         
	];



	// ---------------------------------------------
	// SECTIONS
	// ---------------------------------------------

	// ---------------------------------------------
	// ScrollBar
	// ---------------------------------------------

	function activateScrollBar(thumbHeight) {
		scrollThumbHeight = thumbHeight;
		scrollThumbPosition = 0;
		scrollPercent = 0;
		isScrolling = false;
		$scrollBar = $('#scrollBar');
		$scrollBar.show();
		$scrollThumb = $('#scrollBar .thumb');
		$scrollThumb.css('height',scrollThumbHeight+"px");
		$scrollThumb.bind('mousedown', startScroll);
	}

	function resizeScrollBar() {
		scrollBarHeight = wHeight-60;
		$scrollBar.css('height',scrollBarHeight+"px");
		setScrollBarPosition(scrollPercent);
	}

	function startScroll(event) {
		isScrolling = true;
		thumbDelta = scrollThumbPosition - event.pageY;
		$(document).bind('mousemove', scrollUpdate);
		$(document).bind('mouseup', endScroll);
		return false;
	}

	function scrollUpdate(event) {

		scrollThumbPosition = event.pageY+thumbDelta;

		scrollThumbPosition = Math.max(0, Math.min(scrollBarHeight-scrollThumbHeight, scrollThumbPosition));

		scrollPercent = scrollThumbPosition/(scrollBarHeight-scrollThumbHeight);
		scrollPercent = Math.max(0, Math.min(1, scrollPercent));
		//Removed to improve drag scrolling
		//$scrollThumb.css('top',scrollThumbPosition);

		scrollAnimate.scrollTo( maxScroll*scrollPercent );
		return false;
	}

	function setScrollBarPosition(percent) {
		// console.log(percent);
		scrollThumbPosition = (scrollBarHeight-scrollThumbHeight)*percent;
		$scrollThumb.css('top',scrollThumbPosition);
	}

	function endScroll(event) {
		isScrolling = false;
		$(document).unbind('mousemove', scrollUpdate);
		$(document).unbind('mouseup', endScroll);
		return false;
	}

	// ---------------------------------------------
	// Util stuff
	// ---------------------------------------------

	//--------------------------------------------------
	// Public & Setup
	//--------------------------------------------------
	var init = function( opts ) {
		settings = $.extend( defaults, opts );
		

		//Create scroll animator
		scrollAnimate = ScrollAnimator();
		scrollAnimate.init({
			//Animation data
			animation: animation,
			
			//Default Settings
			maxScroll: maxScroll,		// max scroll
			useRAF : false,				// set requestAnimationFrame
			tickSpeed: 50,				// set interval (ms) if not using RAF
			scrollSpeed: 15,
			debug: false,				// turn on debug
			tweenSpeed: .2,				// scrollTop tween speed
			startAt: settings.startAt,	// scrollTop where the experience starts
			container: $('#main'),		// main container

			//Callbacks
			onStart: function() {
			},

			//There be dragons here, no touching...
			onResize: function(page) {
				//Nasty page tidy up stuff on resize
				wHeight = page.wHeight;
				
				wWidth = (settings.clampWidth > 0 && page.wWidth > settings.clampWidth) ? settings.clampWidth : page.wWidth;
				
				wCenter = page.wCenter;
				
				outroComp = Math.max(0,1000-wHeight)/2;
				//Extra magic stuff here
				var pcent = (outroComp*2)/outroHeightPx;
				ratio = (outroLength*pcent);
				$('.scale').css({'width':wWidth+'px','height':wHeight+'px'});

				//Keep the horizontal start car centered under 750px
				var centerPcent = 100;
				if (wHeight<750) {
					centerPcent = ((wHeight/750)*100);
				}
				$('#horizontalSection').css('background-position','center '+centerPcent+'%');

				//$('#dimensions').html(page.wWidth+","+page.wHeight);

				if ($scrollBar) 
					resizeScrollBar();
				
			},

			onUpdate: function(scrollTop) {
				updateCount++;
				
				if ($scrollBar) 
					setScrollBarPosition(scrollTop/maxScroll);

			}
		});

		return scrollAnimate;
	}

	return {
		init: init,
		scrollAnimate: scrollAnimate
	}
})();

$(document).ready( function() {
	window.siteAnimator = LandroverSite.init();
});